<style>
.roles{
    width:250px;
    height:200px;
    overflow:auto;
}
#details {
    vertical-align:top;
    padding:10px
}
.itemHover {
    background-color:#eec;
}
.details {
    padding:10px;
    background-color:#eec;
}
.details tr th{
    text-align:right;
}
.details tr td{
    padding: 15px;
}
</style>
<script>
    var users = {};
    var extraItemCommands = ria.getExtraItemCommands(['submit','callRemove','remove','showFormError','fadeIn','postDisplay']);
    $(document).ready(function() {
        users.data = <?php echo json_encode($users) ?>;
        users.generalRoles = <?php echo json_encode($generalRoles) ?>;
        users.projectRoles = <?php echo json_encode($projectRoles) ?>;
        users.newItem = ria.buildItem()
        .setJsObjName('users.newItem')
        .setDs(<?php $p = new User(); echo json_encode($p->toArray()) ?>)
        .setElement($('#new'))
        .setTpls({
            view: "<?php echo $userViewTpl ?>",
            form: "<?php echo $userFormTpl ?>",
            details: "<?php echo $userDetailsTpl ?>"
        })
        .setDecorators({
            edit: "<?php echo $editDecorator ?>",
            insert: "<?php echo $insertDecorator ?>",
            view: "<?php echo $viewDecorator ?>"
        })
        .setViews({
            details:{tpl:'details'},
            view:   {tpl:'view',decorator:'view'},
            edit:   {tpl:'form',decorator:'edit'},
            insert: {tpl:'form',decorator:'insert'}
        })
        .setExtraTplValue('_objRequestName','user')
        .setExtraTplValue('_formId','form-new-user')
        .setActualView('insert')
        .bind('postDisplay', function(spec){this.markCheckboxes()})
        .bind('extraValues',function(ds) {
            // relaciona regras gerais.
            var generalRoles = users.generalRoles;
            for(i in generalRoles) {
                generalRoles[i]._objRequestName = ds._objRequestName;
                generalRoles[i].checked = false;
                for(u in ds.UserGeneralRole) {
                  if(ds.UserGeneralRole[u].role_id == generalRoles[i].id) {
                      generalRoles[i].checked = true;
                  }
                }
            }
            ds.generalRoles = generalRoles;
            // relaciona regras por projeto. 
            var projectRoles = users.projectRoles;
            var project;
            var roles;
            for(x in projectRoles) {
                project = projectRoles[x].project;
                roles = projectRoles[x].roles;
                for(y in roles) {
                    roles[y]._objRequestName = ds._objRequestName;
                    roles[y].checked = false;
                    roles[y].project_id = project.id;
                    for(z in ds.UserProjectRole) {
                        if(
                            ds.UserProjectRole[z].project_id == project.id
                            && ds.UserProjectRole[z].role_id == roles[y].id
                        ) {
                            roles[y].checked = true;
                        }
                    }
                }
            }
            ds.projectRoles = projectRoles;
        });
        //DUPLICA CONFIGURAÇÕES DO NOVO ITEM PARA USAR COMO ITEM DA LISTA.
        var listItem = users.newItem.copy();
        //ADICIONA COMANDOS EXTRAS À LISTA.
        listItem.addCommand('mouseOver', function(spec, params){
           this.getElement().addClass('itemHover');
           this.setElement($('#details')).display('details').getElement().hide().fadeIn('slow');
        }).addCommand('mouseOut', function(spec, params){
            this.getElement().removeClass('itemHover');
           this.setElement($('#details')).clear();
        }).addCommand('clickItem',function(){this.edit()});
        //ADICIONA COMANDOS RELEVANTES À AMBOS. SE ADICIONAR ANTES OS COMANDOS, ESTÁ DANDO PROBLEMA.
        ria.addItemCommands([users.newItem,listItem],
            {
                insertAction:'users/insert',
                editAction:'users/edit',
                removeAction:'users/remove'
            }
        );
        

        users.list = ria.buildList()
        .setJsObjName('users.list')
        .setDs({listId:"users-list"})
        .setItemId('users-list-item-')
        .setItemsDs(users.data)
        .setElement($('#local'))
        .setRiaObject(listItem.setActualView('view'))
        .setExtraItemTplValues({
            _jsObjName : 'users.list.getItem(${dsId})',
            _objRequestName : 'user',
            _formId : 'form-user-${dsId}'
        })
        .setTpls({list: "<?php echo $listTpl ?>"})
        .setItemDecorators({div: "<?php echo $divListItemDecorator ?>"})
        .setViews({list:  {tpl:'list',itemDecorator:'div'}})
        .display('list');
        ria.addListCommands([users.list]);
    });
</script>
<style>
#container{
    width: 750px;
    height: 500px;
    overflow: auto;
    border: solid 1px;
    padding: 10px;
}
.dirFound{
   background-color: #beb;
}
.dirNotFound{
   background-color: #ebb;
}
</style>
<h3>Users</h3>

<button type='button' onclick="users.newItem.showOnDialog({view:'insert'})"/>create a new user</button>
<button type='button' onclick="users.list.sort({field:'name'})"/>sort</button>
<table>
    <tr>
        <td><div id='local'></div></td>
        <td id='details'></td>
    </tr>
</table>